<!-- 馆藏统计 -->
<template>
  <div>
    <div class="collection">
      <div class="collection-item">
        <div ref="pie" style="width: 100%; height: 30vh"></div>
      </div>
      <div class="collection-item" style="border-right: none">
        <div ref="bar" style="width: 100%; height: 30vh"></div>
      </div>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
      <el-form-item label="装具">
        <el-select
          v-model="selectCabinet"
          clearable
          placeholder="请选择"
          size="mini"
          @change="getData"
        >
          <el-option
            v-for="item in cabinetList"
            :key="item.deviceId"
            :label="item.deviceName"
            :value="item.deviceId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" height="30vh" border style="width: 100%">
      <el-table-column
        prop="name"
        :label="selectCabinet == '' || selectCabinet == null ? '装具名称' : '列'"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="boxUpNum" label="在架盒数" width="180"> </el-table-column>
      <el-table-column prop="archiveUpNum" label="在架件数"> </el-table-column>
      <el-table-column prop="totalCapacity" label="总容量(cm)"> </el-table-column>
      <el-table-column prop="remainingCapacity" label="剩余容量(cm)"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { pagedeviceCabinetList } from '@/api/bas/cabinet.js'
import { getCollectionList } from '@/api/rfid/board'
import throttle from '@/utils/throttle.js'

export default {
  name: 'CollectionStat',
  props: {
    activeName: {
      type: String,
      default: 'first',
    },
  },
  data() {
    return {
      throttledResize: null,
      chart: null,
      chart2: null,
      cabinetList: [],
      formInline: {
        value: '',
      },
      selectCabinet: '',
      tableData: [],
      colItemList: null,
      // x轴的数据
      xData: [],
      onShelfData: [],
    }
  },
  computed: {},
  watch: {
    // 监听tabs的值
    activeName(newVal) {
      if (newVal === 'second') {
        this.resizeChart()// 重置echarts
      }
    },
  },
  created() {},
  mounted() {
    this.initBarCharts()
    this.getAllCabinet()
    this.throttledResize = throttle(this.onWindowResize, 200)
    window.addEventListener('resize', this.throttledResize)
  },
  beforeDestroy() {
    this.disposeChart()
  },
  methods: {
    onSubmit() {},
    onWindowResize() {
      this.chart.resize()
      this.chart2.resize()
    },

    // 获取全部装具的数据
    getAllCabinet() {
      pagedeviceCabinetList()
        .then((res) => {
          if (res.data.code == 200) {
            this.cabinetList = res.data.data
            // this.selectCabinet = this.cabinetList[0].deviceId
            this.getData(this.selectCabinet)
          }
        })
        .catch((err) => {
        
          this.$message.error(err.message)
        })
    },
    getData(data) {
      getCollectionList({ cabinetId: data })
        .then((res) => {
          if (res.data.code == 200) {
            this.colItemList = res.data.data
            this.tableData = res.data.data

            this.xData = this.handleData(res.data.data)
            this.onShelfData = this.handleOnShelfData(res.data.data)
            this.initBarCharts2()
            this.initBarCharts()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 转化在架的数组
    handleOnShelfData(data) {
      let header = ['product', '在架盒数', '在架件数']
      let transformedArr = [header]
      data.map((child) => {
        transformedArr.push([child.name, child.boxUpNum, child.archiveUpNum])
      })

      return transformedArr
    },
    // 处理为柱状图需要的数据
    handleData(data) {
      let header = ['product', '总容量（cm）', '剩余容量（cm）']
      let transformedArr = [header]

      data.map((child) => {
        transformedArr.push([child.name, child.totalCapacity, child.remainingCapacity])
      })

      return transformedArr
    },

    // 重置echarts
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
      if (this.chart2) {
        this.chart2.resize()
      }
    },
    initBarCharts2() {
      this.chart2 = echarts.init(this.$refs.pie)
      var option
      option = {
        title: {
          text: '在架统计',
          y: 'bottom',
          x: 'center',
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: this.onShelfData,
        },
        toolbox: {
          right: 10,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 强制显示所有标签
            formatter: function (value) {
              // 超出部分显示省略号
              if (value.length > 3) {
                return `${value.slice(0, 3)}...`
              }
              return value
            },
          },
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: 'bar', color: '#60B0E9' },
          { type: 'bar', color: '#87DDE1' },
        ],
      }

      option && this.chart2.setOption(option)
    },
    // 初始化echarts
    initBarCharts() {
      this.chart = echarts.init(this.$refs.bar)

      var option
      option = {
        title: {
          text: '装具容量统计',
          y: 'bottom',
          x: 'center',
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: this.xData,
        },
        toolbox: {
          right: 10,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 强制显示所有标签
            formatter: function (value) {
              // 超出部分显示省略号
              if (value.length > 3) {
                return `${value.slice(0, 3)}...`
              }
              return value
            },
          },
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }],
      }

      option && this.chart.setOption(option)
    },
    // 进行销毁
    disposeChart() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
      if (this.chart2) {
        this.chart2.dispose()
        this.chart2 = null
      }
    },
  },
}
</script>
<style lang="less" scoped>
.collection {
  width: 100%;
  height: 30vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .collection-item {
    width: 50%;
    border-right: 2px solid #ebeef5;
  }
}
</style>